﻿@using System.Web.Script.Serialization

@{
    ViewBag.Title = T("Cutomer.Logo.Title");
}

<style>
    .upload_log_panel {
        border: 1px dashed black;
        width: 320px;
        height: 320px;

        display: inline-block
    }
</style>

    
<h2>@T("Cutomer.Logo.Title")</h2>

<p class="text-success" data-bind="visible:SuccessMessage != null,text:SuccessMessage"></p>

<div>
    <span>@T("Customer.Logo.CurrentLogo.Title")</span>
</div>
<div>
    <img data-bind="attr:{src: PictureUrl}" /> 
</div>

<div>
    
    <span>@T("Customer.Logo.Upload.Title")</span>

</div>
<div>
    <div class="upload_log_panel">
        <img data-bind="attr:{src: DemoUrl}" id="target" /> 
    </div>
</div>

<div>
        <ul id="manualUploadModeExample" class="unstyled" ></ul>
  </div>


@Styles.Render("~/content/fineuploader/fineuploader-3.5.0.css")
@Scripts.Render("~/content/fineuploader/fineuploader-3.5.0.js")
@Scripts.Render("~/content/fineuploader/iframe.xss.response-3.5.0.js")



    <div style="display:none">
        <label>X1 <input type="text" size="4" id="x1" name="x1"></label>
        <label>Y1 <input type="text" size="4" id="y1" name="y1"></label>
        <label>X2 <input type="text" size="4" id="x2" name="x2"></label>
        <label>Y2 <input type="text" size="4" id="y2" name="y2"></label>
        <label>W <input type="text" size="4" id="w" name="w"></label>
        <label>H <input type="text" size="4" id="h" name="h"></label>
    </div>


<input type="button"  data-bind="value:'@T("Cutomer.Logo.Save")', click:saveImage" class="btn btn-primary"/>



@{
    var model = ViewBag.Model;
    var jsonData = new HtmlString(new JavaScriptSerializer().Serialize(model));
}



@section scripts
{     
    
    
  
    
     
@Scripts.Render("~/scripts/jquery.jcrop.js")
@Styles.Render("~/content/jquery.jcrop.css")

    <script type="text/javascript">

        var jcrop_api;
        jQuery(function ($) {

            // The variable jcrop_api will hold a reference to the
            // Jcrop API once Jcrop is instantiated.
           

            // In this example, since Jcrop may be attached or detached
            // at the whim of the user, I've wrapped the call into a function
            initJcrop();

            // The function is pretty simple
            function initJcrop()//{{{
            {
                // Hide any interface elements that require Jcrop
                // (This is for the local user interface portion.)
                //$('.requiresjcrop').hide();

                // Invoke Jcrop in typical fashion
                $('#target').Jcrop({
                    onChange: showCoords,
                }, function () {

                    jcrop_api = this;
                    //jcrop_api.animateTo([100, 100, 400, 300]);

                    // Setup and dipslay the interface for "enabled"
                    //$('#can_click,#can_move,#can_size').attr('checked', 'checked');
                    //$('#ar_lock,#size_lock,#bg_swap').attr('checked', false);
                    //$('.requiresjcrop').show();

                    jcrop_api.setOptions({
                        minSize: [160, 160],
                        maxSize: [160, 160]
                    });

                });

            };
        
            function showCoords(c) {
                $('#x1').val(c.x);
                $('#y1').val(c.y);
                $('#x2').val(c.x2);
                $('#y2').val(c.y2);
                $('#w').val(c.w);
                $('#h').val(c.h);
            };
            //}}}


            
            //$('#size_lock').change(function (e) {
            //    jcrop_api.setOptions(this.checked ? {
            //        minSize: [160, 160],
            //        maxSize: [160, 160]
            //    } : {
            //        minSize: [350, 350],
            //        maxSize: [350, 350]
            //    });
            //    jcrop_api.focus();
            //});

        });

        function CropInfo(customerLogId, picId, x, y, w, h) {
            var self = this;
            self.CustomerLogId = customerLogId;
            self.PictureId = picId;
            self.X = x;
            self.Y = y;
            self.W = w;
            self.H = h;
        }

            
        function saveImage() {
            var cropInfo = new CropInfo(vm.CustomerLogId,vm.PictureId, $('#x1').val(), $('#y1').val(), $('#w').val(), $('#h').val());
            
       

            if (cropInfo.PictureId == "") {
            } else {
                
                vm.SuccessMessage(null);
                
                $.ajax({
                url: "/api/CropImage/Crop",
                type: 'post',
                data: ko.toJSON(cropInfo),
                contentType: 'application/json',
                success: function (result) {
                    if (result.Status == "0") {
                        vm.PictureUrl(result.NewPicUrl);
                        //vm.SuccessMessage(result.Message);
                       
                        toastr.success(result.Message);
                    }
                }
                });
            }
        
        }
</script>
    <script>

        var init = @jsonData;
        
        function LogoModel() {

            var self = this;
            self.CustomerLogId = ko.observable(init.CustomerLogId);
            self.PictureId= ko.observable("");
            self.PictureUrl= ko.observable(init.PictureUrl);
            self.DemoUrl = ko.observable(init.DemoUrl);
            self.SuccessMessage = ko.observable(null);

           
           @* self.SaveLogo = function() {

                $.ajax({
                    url: "/api/CustomerApi/SaveLog",
                    type: 'post',
                    data: ko.toJSON(self),
                    contentType: 'application/json',
                    success: function (result) {

                        if (result.Status == "0") {
                        
                            alert('@T("Cutomer.Logo.SaveSuccess")');
                            //location.href = '' + result.Id;
                        } else {
                            alert(result.Message);
                            //alert("保存失败：" + result.Message);
                        }
                    }
                });
            };*@
        }

        var vm = new LogoModel();
        ko.applyBindings(vm);
        

        $(document).ready(function() {

            var errorHandler = function(event, id, fileName, reason) {
                qq.log("id: " + id + ", fileName: " + fileName + ", reason: " + reason);
            };


            var uploader2 = new qq.FineUploader({
                element: $('#manualUploadModeExample')[0],
                autoUpload: true,
                uploadButtonText: "Select Files",
                request: {
                    endpoint: "/FineUploader/UploadFile",
                    params: { "extraParam1": "true", "picSize": "320" }
                },
                callbacks: {
                    onError: errorHandler,
                    onComplete: function(id, fileName, responseJSON) {
                        if (responseJSON.success) {
                            vm.PictureId(responseJSON.NewPictureId);
                            //vm.PictureUrl();


                            jcrop_api.setImage(responseJSON.NewPictureUrl);
                        }
                    }
                }
            });
        });
    </script>
    
   

}